<template>
  <div>
        <div class="table-header">
          <el-form :inline="true" :model="queryForm"  style="text-align: left; position: relative;" class="demo-form-inline">
            <el-form-item label="申请日期">
              <el-date-picker
                v-model="queryForm.datefrom"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期" 
                :editable="false"
                style="width: 140px"
              ></el-date-picker>
              <span style="margin: 0 5px">至</span>
              <el-date-picker
                v-model="queryForm.dateto"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期" 
                :editable="false"
                style="width: 140px"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getTableData()">查询</el-button>
            </el-form-item>
            <el-form-item style="float: right;">
        <!-- 按钮区域 -->
            <el-button-group>
              <el-button type="primary" @click="openDialog">新增</el-button>
                <el-button type="primary" @click="getOne">编辑</el-button>
                <el-button type="primary" @click="delOrder">删除</el-button>
                <el-button type="primary" @click="checkOne">查看流程</el-button>
            </el-button-group>
          </el-form-item>
          </el-form>
          
        </div>

   
        <el-table ref="multipleTable" :data="orderList" height="330px"  style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{ (queryForm.page - 1) * queryForm.limit + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="申请编号" width="120">
            <template slot-scope="scope">{{ scope.row.orderid }}</template>
          </el-table-column>
          <el-table-column label="费用部门" width="100">
            <template slot-scope="scope">{{ scope.row.dname }}</template>
          </el-table-column>
          <el-table-column label="申请日期" width="120">
            <template slot-scope="scope">{{ scope.row.ordertime }}</template>
          </el-table-column>
          <el-table-column label="订餐人员" width="150" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.orderpersons }}</template>
          </el-table-column>
          <el-table-column label="订餐数量" width="80" align="center">
            <template slot-scope="scope">{{ scope.row.num }}</template>
          </el-table-column>
          <el-table-column label="订餐类型" width="80">
            <template slot-scope="scope">{{ scope.row.ordertype_name }}</template>
          </el-table-column>
          <el-table-column label="当前状态" width="140">
            <template slot-scope="scope">{{ scope.row.state_name }}</template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 20px;text-align: right;"
          :page-sizes="[5, 7, 10, 15]"
          :page-size="queryForm.limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    <order-detialis 
      :visible="visible" 
      :orderInfo="orderForm" 
      @Ordersave="tableLoad"   
      @refresh-list="getTableData" 
      :userInfo="userInfo" 
      @close="setIsShow"
    ></order-detialis>
    <flow-info   :isShow.sync="flowvisible" :userInfo="userInfo"  :currentState="orderForm?.orderInfo?.state ?? 0"  ></flow-info>
  </div>
</template>

<script>
import FlowInfo from '@/components/FlowInfo.vue';
import OrderDetialis from '@/components/OrderDetialis.vue';

export default {
  name: 'employeesummary',
  components: {
    OrderDetialis,
    FlowInfo
  },
  data(){
      return{
        userInfo:{
          deptno:'',
          ename:'',
          empno:'',
          dname:'',
          roleid:[]
         
        },
        orderList:[],
        checkedOrderList:[],
        queryForm: {
            datefrom: '',
            dateto: '',
            empno:'',
            deptno:'',
            page: 1,
            limit: 7
        },
        orderForm:{},
        total: 0,
        visible:false,
        flowvisible:false
      }
    },
  methods:{
      handleSelectionChange(val){
          this.checkedOrderList = val
      },
      getTableData(){
        this.$http.post("/getOrderInfo",this.queryForm).then(res => {
          this.orderList = res.data.data
          this.total = res.data.count
        }).catch(err => {
          console.error('获取订单列表失败:', err)
          this.$message.error('获取数据失败')
        })
      },
      getDname(){
        let deptno = this.userInfo.deptno
        this.$http.get('/getDname/' + deptno).then(res =>{
          this.userInfo.dname = res.data
          
        })

      },
      openDialog(){
        this.orderForm = {}; 
        this.visible = true
        
      },
      setIsShow(){
        this.visible = false
      },
      handleSizeChange(val) {
        this.queryForm.limit = val
        this.getTableData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getTableData()
      },
      checkSelectedOne() {
        if (this.checkedOrderList.length === 0) {
          this.$message.warning("请选择一条数据")
          return false
        }
        if (this.checkedOrderList.length > 1) {
          this.$message.warning("只能选择一条数据")
          return false
        }
        return true
      },
      delOrder(){
        if(!this.checkSelectedOne()) {
          return
        }
        
        if(this.checkedOrderList[0].state > 0){
            this.$message.warning("该订单在审核流程中，不能删除")
            return 
          }
          
        this.$confirm('确定要删除选中数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let orderid = this.checkedOrderList[0].orderid
            this.$http.post('/delOrderOne',{orderid: orderid}).then(res => {
            if(res.data === 'success'){
              this.$message.success("删除成功")
              this.getTableData()
            } else {
              this.$message.error("删除失败")
            }
          }).catch(err => {
            console.error('删除订单失败:', err)
            this.$message.error('删除失败')
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      getOne(){
        if(!this.checkSelectedOne()) return
        
        let id = this.checkedOrderList[0].id
        this.$http.get('/getOnes/' + id).then(res => {
          this.orderForm = res.data
          this.visible = true
        }).catch(err => {
          console.error('获取订单详情失败:', err)
          this.$message.error('获取详情失败')
        })
      }, 
      checkOne(){
        if(!this.checkSelectedOne()) return
        let flowid = this.checkedOrderList[0].id
        this.$http.get('/getOnes/' + flowid).then(res => {
          this.orderForm = res.data || { orderInfo: {} }
          this.flowvisible = true
        }).catch(err => {
          console.error('获取流程信息失败:', err)
          this.$message.error('获取流程信息失败')
        })
      },
      tableLoad(msg){
        if(msg === 'success'){
          this.visible = false
          this.$message.success("订单信息操作成功")
          this.getTableData()
        } 
      }
  },
   created() {
    const roleidStr = localStorage.getItem("roleid") || ''
      this.userInfo.roleid = roleidStr.split(',').map(Number).filter(id=> !isNaN(id))
    this.userInfo.empno = Number(localStorage.getItem("empno"))
    this.userInfo.deptno = Number(localStorage.getItem("deptno"))
    this.userInfo.ename = localStorage.getItem("ename")
    this.getDname()

    this.queryForm.empno = this.userInfo.empno || '';
    this.queryForm.deptno = this.userInfo.deptno || '';
    this.getTableData()
  }
}
</script>

<style scoped>
/* .table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.table-actions {
  display: flex;
  gap: 10px;
} */
</style> 